<template>
	<view>
		<!-- :style="winheight" -->
		<view class="home-box" @touchend="touchend">
			<!-- @touchstart="touchstart" @touchend="touchend" @touchmove.stop.prevent="touchmove" -->
			<view class="statusheight">
			</view>
			<view class="homebg">
				<view class="myheadertop">
					<!-- <my-header @clickAvatar="clickAvatar"></my-header> -->
					<my-drawer @details='details' define='t1' :sList='sList' @changeschedule='changeschedule' @editCalendar="editCalendar" @add="addDay"
					 :width="300" ref="drawer"></my-drawer>
					<my-calender-title @openDrawer="openDrawer" @switchClass="switchClass" ref="myCalenderTitle" @changeShow='changeShow'
					 @changeMode="changeMode" :timeStr="timeStr"></my-calender-title>
				</view>
				<view :class="objstatus.topshow?'contentbox2':'contentbox1'">
					<block v-if="classShow == 1">
						<!-- <view class="caleminheight"> -->
						<view :class="objstatus.topshow?'calendarheaderbox1':'calendarheaderbox2'">
							<view class="calendar-day">
								<view class="calendar-week" v-for="(week, index) in weeks" :key="index">
									{{week}}
								</view>
							</view>
							<view class="zzx-calendar" :style="{'top':calehright + 'px'}">
								<my-calendar ref="calendar" @selected-change='btnselectdata' @dchange='changecalender' @days-change='daysChange'
								define="t1"
								 :timeStr="timeStr" :monthlist='monthlist' @switchClass="switchClass"></my-calendar>
							</view>
						</view>
						<!-- </view> -->
						<!-- <view class="mycalendarbox1"> -->
						<!-- <movable-area>
							 	<movable-view direction="vertical" class=""> -->
						<!-- <view class="movableview"> -->
						<view class="Sizer">
							<view class="Sizeritem">
								<block v-for="(item, index) in Sizerlist" :key='index'>
									<text @click="btnSizer(item)" class="utext">{{item.name}}</text>
								</block>
								<text class="utext defauletxt" :class="'defauletxtbg'+ defauletxt"></text>
							</view>
						</view>
						<my-home-list @openmedia='openmedia' @changelist='changeschedule' :style="{'z-index': Sizerindex}" class="homelist" :defauletxt='Sizercurrent'
						 :data="homeList"></my-home-list>
						<!-- </view> -->
						<view :style="{'height': '50px','margin-top':'20px'}"></view>
						<!-- </movable-view>
							 </movable-area> -->

						<!-- <swiper :style="{height:'900rpx'}" :current="Sizercurrent" :disable-touch='true' :indicator-dots="true" :autoplay="false"
							 :interval="3000" :duration="600">
								<swiper-item v-for="(week, index) in weeks" :key="index">
									<view class="swiper-item">
										<block v-for="(item,indexs) in homeList" :key='indexs' v-if="indexs<5">
											
										</block>
									</view>
								</swiper-item>
							</swiper> -->
						<!-- </view> -->
					</block>
					<block v-if="classShow == 2">
						<my-weeks :timeStr="timeStr" :topshow='objstatus.topshow'></my-weeks>
					</block>
					<block v-if="classShow == 3">
						<view :class="objstatus.topshow?'calendar-weeks1':'calendar-weeks2'">
							<view class="calendar-week" v-for="(week, index) in weeks" :key="index">
								{{week}}
							</view>
						</view>
						<view class="mycalendarmonth">
							<my-calendar-month :classShow="objstatus.topshow" :userId="userId" @selected-change='btnselectdata' ref="calendarMonth"></my-calendar-month>
						</view>
					</block>
				</view>
			</view>
			<!-- 添加 -->
			<my-add @goadd="goadd"></my-add>
			<view class="invoice-popup">
				<my-popup type="bottom" ref="unipopup">
					<view class="invoice-popup-content">
						<view class="mymedia">
							<my-media  @changemedia='changemedia' :currentItem='currentItem' ></my-media>
						</view>
				</view>
			</my-popup>
			</view>
			<!-- <my-media :mymedia='ismedia' @changemedia='changemedia' ></my-media> -->
		</view>
	</view>
</template>
<script>
	let isweekshow = false;
	let pagescrollheight = 0;
	import {
		showScheduleByDay,
		showHomeByMonth
	} from "@/api/api.js"
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex';
	import moment from "moment"

	export default {
		name: "home",
		data() {
			return {
				currentItem:{},
				monthlist:[],
				ismedia:false,
				Sizerindex: '',
				winheight: '',
				Sizerlist: [{
						name: '全部',
						id: 10
					},
					{
						name: '待办',
						id: 0
					},
					{
						name: '完成',
						id: 1
					},
					{
						name: '错过',
						id: 2
					}
				],
				calehright: 1,
				startTouch: '',
				Sizercurrent: 10, // 日程筛选类型
				defauletxt: 10, // 默认选择的日程

				weeks: ['一', '二', '三', '四', '五', '六', '日'],
				total: 0,
				homeList: {}, //日程列表
				schedulelist: [],
				classShow: 1,
				objstatus: {
					topshow: false
				},
				userId: 1, //用户id
				openSwiperItem: false, //是否打开列表侧边栏2
				movelength: 0,
			};
		},
		onLoad(e) {
			uni.setStorageSync("userId", 1)
			if (uni.getStorageSync("userId")) {
				this.userId = uni.getStorageSync("userId")
			}
		},
		mounted() {
			this.getHeight()
		},
		watch: {
			sList: {
				handler() {
					this.initDataList(moment().format('YYYY-MM-DD'));
				},
				deep: true
			}
		},
		computed: {
			// 对象中的state 和数组中的localJobTitle 都是和login中的参数一一对应。
			...mapState('demo', {
				names: state => state.name,

			}),
			// ...mapState('calenderTitle', {
			// 	names: state => state.name,
			// 	// timeStr:state=>state.timeStr
			// }),
			// mapGeter 直接获得全局注册的getters
			...mapGetters({
				'timeStr': 'timeStr',
				'sList': 'scheduleList',
			})
		},
		methods: {
			// 获取高度
			getHeight(time) {
				uni.getSystemInfo({
					success(res) {
						let height = res.windowHeight - 50;
						this.winheight = `{ height:${height} +px}`
						console.log('系统', this.winheight);
					}
				})
				// setTimeout(() => {
				// 	let mystyle = '.calendar-days' + this.current;
				// 	uni.createSelectorQuery().in(this).select(mystyle)
				// 		.boundingClientRect(data => {
				// 			this.weekheight = data.height + 52;
				// 		})
				// 		.exec();
				// }, time)
			},
			bindClick(e) {
				console.log(e);
			},
			btnSizer(item) {
				this.defauletxt = item.id;
				this.Sizercurrent = item.id
			},
			changemedia(){
				this.$refs.unipopup.close()
			},
			openmedia(val){
				console.log('打开心得',val);
				this.currentItem = val;
				this.$refs.unipopup.open()
			},
			changeschedule(val) {
				if(val){
						uni.navigateTo({
							url:`/pages/template/switchAdd/repeatDays/index?id=${val.id}&typeChild=${val.typeChild}`
						})
				}else{
					this.initDataList(this.timeStr);
				}
				
				
			},
			// 日程列表获取
			initDataList(date) {
				var childIds = [];
				if (this.sList.length > 0) {
					this.sList.map(item => {
						if (item.check == true) {
							childIds.push(item.id)
						}
					})
				}
				showHomeByMonth({
					date: date,
					childIds: [childIds]
				}).then(res=>{
					if(res.statusCode ==200 && res.data.code == 0){
						this.monthlist = res.data.data.ddlist;
					}
					console.log('res',this.monthlist);
				})
				let objs = {
					// userId:uni.getStorageSync("userId"),
					// userId: 25,
					pageSize: 0,
					pageNum: 0,
					date: date,
					childIds: [childIds]
				}
				// var obj =  {
				// 	completedList: [],
				// 	unfinishedList: [],
				// 	missList: []
				// };

				// for (let i = 0; i < 3; i++) {
				// 	obj.unfinishedList.push({
				// 		state: 1,
				// 		name: '我是待办的',
				// 		icon: "../../static/ming-pop/daiban.png",
				// 		adressname: '上海体育馆',
				// 		startTime: '2021/8/6  08:00-10:00',
				// 		// color: null
				// 		// endTime: "06:01:00"
				// 		// id: 11358
				// 		// name: "我他妈的"
				// 		// startTime: "00:00:00"
				// 		// state: "0"
				// 		// typeChild: 2
				// 	})

				// 	obj.completedList.push({
				// 		state: 2,
				// 		name: '我是完成的',
				// 		icon: "../../static/ming-pop/today.png",
				// 		adressname: '上海体育馆',
				// 		startTime: '2021/8/6  08:00-10:00'
				// 	});
				// 	obj.missList.push({
				// 		state: 3,
				// 		name: '我是错过的',
				// 		icon: "../../static/ming-pop/today.png",
				// 		adressname: '上海体育馆',
				// 		startTime: '今天   08:00-10:00'
				// 	})
				// }
				// this.homeList =arr;
				// this.homeList = obj
				showScheduleByDay(objs).then(res => {
					if (res.statusCode == 200 && res.data.code == 0) {
						var arr = res.data.data;
						this.homeList = arr;
						// setTimeout(()=>{
						// 	this.defauletxt = 10;
						// },10)
						console.log(this.homeList);
					}
				})
			},
			// 打开角色侧边栏
			openDrawer() {
				console.log(this.$refs.drawer);
				this.$refs.drawer.open()
			},
			// vuex的集合
			...mapMutations({
				setName: 'demo/setName',
				setDate: 'calenderTitle/setDate'
			}),
			// 只有异步可以返回值、设置值
			...mapActions({
				changeName: 'demo/changeName', // 第一个blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，后面一个blogAdd 才是actions里面函数方法名称
				getName: 'demo/getName', // getstore 是mutation 里的方法，totalAlise是重新定义的一个别名方法，本组件直接调用这个方法
			}),
			daysChange(val) {
				// console.log(val)
			},
			changecalender(val) {
				console.log('val',moment(val).format('YYYY-MM-DD') )
				let date = moment(val).format('YYYY-MM-DD');
				this.initDataList(date);
				this.setDate(date);
			},
			btnselectdata(val) {
				this.setDate(val.fullDate);
				this.initDataList(val.fullDate);
			},
			// ...mapActions('demo', ['changeName']),
			// ...mapMutations('demo',['getName','setNmae']),
			/*
			 * 侧标右侧划出栏icon点击
			 * @val:sucess完成事件，edit:编辑事件，del:删除
			 */
			swiperAction(val) {
				switch (val) {
					case 'sucess':
						uni.showToast({
							title: "完成",
							icon: "success"
						})
						break;
					case 'edit':
						break;
					case 'del':
						uni.showModal({
							title: '提示',
							content: '确认删除吗',
							success: function(res) {
								if (res.confirm) {
									uni.showLoading({
										title: '删除中'
									});
									setTimeout(() => {
										uni.hideLoading();
										uni.showToast({
											title: "删除成功",
											icon: "success"
										})
									}, 2000)
								}
							}
						});
						break;
				}
			},
			details(item) {
				console.log('编辑', item.id)
				uni.navigateTo({
					url: '../template/addEditCalendar/scheduledetails/scheduledetails?id=' + item.id + '&regulateId=' + item.regulateId +
						'&state=' + item.state
				})
			},
			editCalendar(val) {
				console.log('编辑')
				uni.navigateTo({
					url: `../template/addEditCalendar/edit?id=${val.id}&name=${val.name}`,
				})
			},
			//添加日历表
			addDay(id) {
				console.log(id)
				uni.navigateTo({
					url: "../template/addEditCalendar/add?id=" + id
				})
			},
			//打开左侧抽屉
			clickAvatar() {
				this.$refs.drawer.open();
			},
			changeShow(val) {
				console.log('hahah1', val);
				this.objstatus.topshow = val;
			},
			// 切换 日 周 年
			changeMode(val) {
				if (this.$refs.calendar) {
					this.$refs.calendar.changeMode()
				}

			},
			// 日周月视图切换
			switchClass(val) {
				console.log(val, this.classShow);
				this.classShow = val;
				this.objstatus.topshow = false;
				this.$forceUpdate()
			},
			goadd() {
				if (uni.getStorageSync("userId")) {

					// 一次性
					// uni.navigateTo({
					// 	url: "../template/switchAdd/onceSchedule/index"
					// })
					// 重复
					// uni.navigateTo({
					// 	url: "../template/switchAdd/switchAdd"
					// })
					uni.navigateTo({
						url: "../template/switchAdd/repeatDays/index"
					})

				} else {
					uni.switchTab({
						url: "../mine/index"
					})
				}
			},
			touchend(e) {
				if (this.classShow == 1) {
					if (pagescrollheight > 200) {
						return
					}
					if (pagescrollheight > 120) {
						console.log('向上过滤');
						if (!isweekshow) {
							this.$refs.calendar.changeMode()
							isweekshow = true;
							this.Sizerindex = 9;
						}
						this.calehright = 0;
						uni.pageScrollTo({
							scrollTop: 200,
							duration: 200
						})
					} else {
						console.log('向下过滤');
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 200
						})
					}
				}

			},
			touchstart(e) {
				console.log('开始滑动', e.changedTouches[0]);
				this.movelength = e.changedTouches[0].clientY;
			},
			touchmove(e) {
				let start = this.movelength;
				let move = e.changedTouches[0].clientY;
				// console.log('开始滑动',start - move);

				// if(start > move +20){
				// 	this.calehright =this.calehright + 2;
				// }else{
				// 	this.calehright =this.calehright - 2;
				// }
				if (pagescrollheight > move) {
					console.log('向上');
					this.calehright = this.calehright + 2;
				} else {
					this.calehright = this.calehright - 2;
					console.log('向下');
				}
				pagescrollheight = move;
			},
		},
		// 滚动事件
		onPageScroll(e) {
			let that = this;
			if (this.classShow == 1) {
				console.log(e.scrollTop);
				let calehright = this.calehright;
				if (pagescrollheight < e.scrollTop) {
					// 向下;
					calehright = calehright - 2;
				} else {
					// 向上;
					calehright = calehright + 2;
				}
				// 复原月状态
				if (e.scrollTop < 140 && e.scrollTop > 0) {
					// console.log('变身1', calehright);
					calehright = 0;
					if (isweekshow) {
						pagescrollheight = 0;
						isweekshow = false;
						this.Sizerindex = 99
						this.$refs.calendar.changeMode()
					}
				}
				// 复原周状态
				if (calehright < -90 || e.scrollTop > 135) {
					// console.log('变身2', calehright);
					calehright = 0;
					if (!isweekshow) {
						this.$refs.calendar.changeMode()
						isweekshow = true;
						this.Sizerindex = 9
					}
				}
				this.calehright = calehright;


				pagescrollheight = e.scrollTop;
			}
			// console.log('页面滚动', this.calehright);
			if (that.objstatus.topshow) {
				that.objstatus.topshow = !that.objstatus.topshow;
				this.$refs.myCalenderTitle.switchShow = false;
				// this.objstatus.topshow = false;
				// this.$forceUpdate()
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 滑动组件
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 150rpx;
		width: 750rpx;
		background-color: #007AFF;
		color: #fff;
	}

	.movableview {
		border: 1rpx solid red;
		display: flex;
		flex-direction: column;
	}
	.mymedia{
		background-color: #FFFFFF;
		height: 100vh;
		width: 100%;
		// position: relative;
		border: 1rpx solid red;
		box-sizing: border-box;
	}

	movable-area {

		height: 800rpx;
		width: 100%;
		background-color: #D8D8D8;
		overflow: hidden;
	}

	.max {
		width: 750rpx;
		height: 500rpx;
	}


	// 控制日历对高度
	.mycalendarmonth {
		position: relative;
		top: 160rpx;
	}

	.calendarheaderbox1 {
		width: 100%;
		transition: all .3s;
		position: fixed;
		// z-index: 20;
		top: 248rpx;
	}

	.calendarheaderbox2 {
		width: 100%;
		position: fixed;
		transition: all .3s;
		z-index: 99;
		background-color: $today-bg-color;
		top: 162rpx;
	}

	.calendar-day {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		height: 88upx;
		line-height: 87upx;
		justify-content: center;
		background-color: $today-bg-color;
		align-items: center;
		font-size: 30upx;
		padding: 0 16rpx;
		position: relative;
		z-index: 199;

		.calendar-week {
			color: #707070;
			font-size: 20rpx;
			width: calc(100% / 7);
			height: 100%;
			text-align: center;
		}
	}

	.calendar-weeks1 {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		height: 88upx;
		line-height: 87upx;
		justify-content: center;
		// background-color: #FFFFFF!important;
		background-color: $today-bg-color !important;
		background-color: #000000;
		align-items: center;
		font-size: 30upx;
		padding: 0 16rpx;
		transition: all .3s;
		position: fixed;
		z-index: 20;
		top: 248rpx;

		.calendar-week {
			color: #707070;
			font-size: 28rpx;
			width: calc(100% / 7);
			height: 100%;
			text-align: center;
		}
	}

	.calendar-weeks2 {
		width: 100%;
		display: flex;
		transition: all .3s;
		flex-flow: row nowrap;
		height: 88upx;
		line-height: 87upx;
		justify-content: center;
		background-color: $today-bg-color !important;
		align-items: center;
		font-size: 30upx;
		padding: 0 16rpx;
		position: fixed;
		z-index: 12;
		top: 162rpx;

		.calendar-week {
			color: #707070;
			font-size: 28rpx;
			width: calc(100% / 7);
			height: 100%;
			text-align: center;
		}
	}


	// 顶部的显示
	.statusheight {
		position: fixed;
		top: 0;
		z-index: 197;
		height: 90rpx;
		background-color: $today-bg-color;
	}

	.homebg {
		background-color: $today-bg-color;

		.myheadertop {
			position: fixed;
			width: 100%;
			top: 84rpx;
			z-index: 199;
			background-color: $today-bg-color;
		}

		// 日 显示
		.contentbox1 {
			transition: all 0.3s;
			position: relative;
			// top: 90rpx;
		}

		.contentbox2 {
			transition: all 0.3s;
			position: relative;
			top: 170rpx;
		}

		.zzx-calendar {
			position: relative;
			z-index: 1;
			background-color: $today-bg-color;
		}
	}


	// 切换过滤1
	.objstatus1 {
		margin-top: 0rpx;
	}

	// 切换过滤2
	.objstatus2 {
		margin-top: 60rpx;
	}


	.total-item-day {
		border-radius: 10rpx;
		height: 80%;
		line-height: 54rpx;
		width: 200rpx;
		padding: 0 16rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.total-item {
		display: flex;
		height: 100%;
		align-items: center;
	}

	.total {
		width: 100%;
		margin: 0 auto;
		height: 66rpx;
		padding: 0 26rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;
		margin-top: 16rpx;
		align-items: center;
	}

	.rightIcon:nth-child(1) {
		background-color: #9AB1FF;
	}

	.rightIcon:nth-child(2) {
		background-color: #6BDFA4;
	}

	.rightIcon:nth-child(3) {
		background-color: #FF8787;
	}


	.caleminheight {
		height: 400rpx;
	}

	// 滑块
	.myswipeaction {
		position: relative;
		// top: 160rpx;
		transform: translateY(160rpx);
	}

	// .mycalendarbox1 {
	// position: relative;
	// transform: translateY(242rpx);
	// z-index: 299;
	// background-color: $today-bg-color;
	.homelist {
		position: relative;
		z-index: 99;
		// transition: all 1s;
		min-height: 100vh;
	}

	.Sizer {
		width: 100%;
		justify-content: center;
		display: flex;
		height: 58rpx;
		position: sticky;
		top: 316rpx;
		z-index: 181;
		// border: 1rpx solid red;
		background-color: $today-bg-color;
		margin-top: 680rpx;

		.Sizeritem {
			width: 554rpx;
			height: 58rpx;
			background: #26252A;
			border-radius: 14rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			position: relative;

			.utext {
				width: 129rpx;
				height: 50rpx;
				color: #FFFFFF;
				border-radius: 14rpx;
				text-align: center;
				line-height: 55rpx;
			}

			.defauletxt {
				transition: all .5s;
				position: absolute;
				background-color: rgba(242, 242, 242, .14);
				color: #F2F2F2;
			}

			.defauletxtbg10 {
				left: 8rpx;
			}

			.defauletxtbg0 {
				left: calc(554rpx /4 + 8rpx);
			}

			.defauletxtbg1 {
				left: calc(554rpx /2 + 8rpx);
			}

			.defauletxtbg2 {
				left: calc(554rpx /1.32);
			}
		}
	}

	// }



	.item-box {
		width: 210rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		align-items: center;
		border-radius: 0 10rpx 10rpx 0;
		margin-top: 15rpx;

		.img {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.action-item {
		width: 70rpx;
		height: 80rpx;
		background-color: #707070;

		.img {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.home-box {
		min-height: calc(100vh - 50px);
		// min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: $today-bg-color;
	}
</style>
